<template>
    <div class="commentArea">
        <div class="blogContent-comment">
            <!-- 发送评论 -->
            <p class="blogContent-comment-title">发表评论</p>
            <div class="blogContent-comment-area">
                <!-- QQ号 -->
                <van-cell-group inset>
                    <van-field v-model="CommentQQ" center clearable label="QQ" placeholder="请输入QQ号码">
                        <template #button>
                            <van-button @click="clickUserMessage" size="small" type="primary">获取头像昵称</van-button>
                        </template>
                    </van-field>
                    <!-- 用户信息 -->
                    <div v-show="userMessageShow">
                        <van-field v-model="userMessage.name" center clearable label="昵称" placeholder="需要输入昵称">
                            <template #button>
                                <img :src="userMessage.userImg" alt="">
                            </template>
                        </van-field>
                    </div>

                    <van-field v-model="leaveWord" rows="2" autosize label="留言" maxlength="100" type="textarea"
                        placeholder="请输入留言" />
                </van-cell-group>
                <van-button v-show="!countDownComment" class="send-btn" @click="addComment" type="success" size="small"
                    icon="guide-o">
                    发表评论
                </van-button>
                <!-- 倒计时 -->
                <van-count-down v-show="countDownComment" @finish="timeFinish" :time="time" format="ss 秒后可发"
                    :auto-start="false" ref="timeDown" />

            </div>
            <!-- 评论列表 -->
            <p class="blogContent-comment-title">评论区</p>
            <div class="blogContent-comment-list">
                <!-- 没有评论 -->
                <div class="noComment-box" v-show="commentListShow">
                    <van-icon name="comment" size="20" color="#1989fa" />等你来评论 ~
                </div>
                <!-- 评论列表 -->
                <div v-for="item in commentList" :key="item.id" class="blogContent-comment-list-box">
                    <div class="comment-list-box-usermasg">
                        <img :src="item.user_img" alt="">
                        <div>
                            <p>{{ item.user_name }}</p>
                            <p>{{ item.create_timer }}</p>
                        </div>
                    </div>
                    <!-- 评论内容 -->
                    <div class="comment-list-box-word">
                        <p>{{ item.leave_word }}</p>
                    </div>

                    <!-- 查了评论 -->
                    <div v-if="item.there_reply" class="comment-list-box-reply" @click="replyMessageShow(item.comment_id)">
                        查看评论</div>
                    <!-- 回复 -->
                    <div v-else class="comment-list-box-reply" @click="replyMessageShow(item.comment_id)">回复</div>

                    <van-popup v-model:show="replyShow" round close-icon-position="top-left" position="bottom"
                        :style="{ height: '60%' }">
                        <!-- 输入任意文本 -->
                        <!-- 显示评论的列表 -->
                        <div class="comment-list-replylist">
                            回复列表
                            <!-- 没有评论显示没有 -->
                            <div class="noComment-box" v-show="replyMessageListShow">
                                <van-icon name="comment" size="20" color="#1989fa" />等你来吐槽 ~
                            </div>
                            <div :style="{ marginTop: '10px', borderBottom: '1px solid #ddd' }"
                                v-for="item in replyMessageList" :key="item.comment_id"
                                class="blogContent-comment-list-box">
                                <!-- 回复列表 -->
                                <div class="comment-list-box-usermasg">
                                    <img :src="item.user_img" alt="">
                                    <div>
                                        <p>{{ item.user_name }}</p>
                                        <p>{{ item.create_timer }}</p>
                                    </div>
                                </div>
                                <!-- 回复内容 -->
                                <div class="comment-list-box-word">
                                    <p>{{ item.reply_word }}</p>
                                </div>
                            </div>

                        </div>
                        <div class="comment-list-replybox">
                            <van-field v-model="replyMessageValue" rows="2" autosize label="回复" type="textarea"
                                placeholder="请输入回复" maxlength="100" show-word-limit />
                            <van-button @click="replyMessage" type="primary" size="large">发送回复</van-button>
                        </div>

                    </van-popup>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, customRef } from "vue";
import { sendComment, getcomment, replycomment, searchreplylist } from "@/api/request";
import { replaceStr } from "@/assets/replaceCommentStr";
import moment from "moment";
import { v4 as uuidv4 } from "uuid";
import { getUserMessage } from "@/api/request";
import { showToast, showLoadingToast } from 'vant';
import { storeToRefs } from "pinia";
import { useStore } from "@/store";
const store = useStore();
let { contentID } = storeToRefs(store);
// 内容id
const contentId = ref('')
// 发送评论等60秒后可继续发
const countDownComment = ref(false)
const time = ref(60 * 1000);
// 定义ref才能实用它里面的开始倒计时时间
const timeDown = ref()
// 监测倒数结束隐藏
const timeFinish = () => {
    countDownComment.value = false
}

// 敏感词过滤
const commentReplaceRef = (value) => {
    return customRef((track, trigger) => {
        return {
            // 访问数据的时候会自动执行
            get() {
                track()
                return value
            },
            // 数据修改的时候自动执行的函数
            set(newValue) {
                value = replaceStr(newValue)
                trigger()
            }
        }
    })
}
// 评论列表
const commentList = ref([])
// 没有评论显示没有
const commentListShow = ref(false)
// 请求对应文章评论列表 
onMounted(async () => {
    contentId.value = contentID.value
    await getcomment({
        contentId: contentId.value,
    }).then(({ data }) => {
        commentList.value = data.data

        if (commentList.value.length == 0) {
            commentListShow.value = true
        }
    })
    console.log(commentList.value);

})


// QQ号
const CommentQQ = ref('');
const userMessage = reactive({
    name: '',
    userImg: 'https://q2.qlogo.cn/headimg_dl?dst_uin=2521170821&spec=640',
    userEmail: '123123@qq.com'

})
// 留言输入框
const leaveWord = commentReplaceRef('');


const userMessageShow = ref(false)
// 获取QQ号信息
const clickUserMessage = () => {
    if (CommentQQ.value == '') return showToast('不能为空');
    showLoadingToast({
        message: '加载中...',
        forbidClick: true,
    });
    getUserMessage({
        qq: CommentQQ.value
    }).then(({ data }) => {

        console.log('有了');
        console.log(data);
        let { name, imgurl, qemail } = data;
        userMessage.name = name;
        userMessage.userImg = imgurl;
        userMessage.userEmail = qemail;
        userMessageShow.value = true
        // console.log(userMessageShow.value);
        // console.log(data);
        showToast('获取成功');



    })
}

// 添加评论
const addComment = () => {
    let nowTimer = moment(new Date().getTime()).format('YYYY-MM-D HH:mm:ss');
    console.log(nowTimer);

    if (userMessage.name != '' && leaveWord.value != '') {
        // 点击后显示倒计时
        countDownComment.value = true
        // 开始倒计时
        timeDown.value.start()
        sendComment({
            commentId: uuidv4(),
            contentId: contentId.value,
            userName: userMessage.name,
            userImg: userMessage.userImg,
            userEmail: userMessage.userEmail,
            leaveWord: leaveWord.value,
            createTimer: nowTimer
        }).then(({ data }) => {
            console.log(data.data);
            if (data.code == 200) {
                commentList.value.unshift({
                    contentId: contentID.value,
                    user_name: userMessage.name,
                    user_img: userMessage.userImg,
                    user_email: userMessage.userEmail,
                    leave_word: leaveWord.value,
                    create_timer: nowTimer
                })
                leaveWord.value = '';
                showToast('发送成功');
            }
        })
    } else {
        showToast('!  内容没有输入完整');
    }

}
// 回复的显示和隐藏
const replyShow = ref(false);
const replyMessageValue = commentReplaceRef('')
// 当前回复的评论的id
const commentID = ref('')
// 回复列表
const replyMessageList = ref([]);
// 没有回复内容显示没有
const replyMessageListShow = ref(false)
// 请求每条评论的 回复
const replyMessageShow = (id) => {
    if (userMessage.name != '' && CommentQQ.value != '') {
        replyShow.value = true;
        commentID.value = id
        searchreplylist({
            commentID: commentID.value
        }).then(({ data }) => {
            if (data.code == 200) {
                replyMessageList.value = data.data;

                // 判断有没有回复
                if (replyMessageList.value.length == 0) {
                    replyMessageListShow.value = true
                } else {
                    replyMessageListShow.value = false;
                }
            }
        })
    } else {
        showToast('请先获取您本人的QQ信息');

    }


}
// 回复评论弹窗里的回复
const replyMessage = () => {
    console.log(commentID.value);
    if (userMessage.name != '' && replyMessageValue.value != '' && CommentQQ.value != '') {
        let nowTimer = moment(new Date().getTime()).format('YYYY-MM-D HH:mm:ss');
        let replyCommentObj = {
            replyCommentId: uuidv4(),
            commentId: commentID.value,
            userName: userMessage.name,
            userImg: userMessage.userImg,
            userEmail: userMessage.userEmail,
            replyWord: replyMessageValue.value,
            createTimer: nowTimer
        }
        replycomment(
            replyCommentObj
        ).then(({ data }) => {
            if (data.code == 200) {
                replyMessageList.value.push({
                    comment_id: uuidv4(),
                    comment_first_id: commentID.value,
                    user_name: userMessage.name,
                    user_img: userMessage.userImg,
                    user_email: userMessage.userEmail,
                    reply_word: replyMessageValue.value,
                    create_timer: nowTimer
                })
                replyMessageValue.value = '';
                showToast('回复成功');
            } else {
                showToast(data.data);

            }
        })

    }
}

</script>

<style lang="scss">
.commentArea {
    .blogContent-comment {

        // 发送评论
        .blogContent-comment-area {
            min-height: 50px;
            background-color: #fff;
            border-radius: 8px;
            padding: 10px 0 30px;
            position: relative;

            .van-cell-group {
                padding: 0 10px;
                margin: 0;
                // display: flex;
                // align-items: center;

                .van-field {
                    padding: 10px;

                    .van-cell__title {
                        width: 40px;
                    }
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }

            // 发送按钮
            .send-btn {
                position: absolute;
                bottom: 10px;
                right: 20px;
            }

            // 倒计时
            .van-count-down {
                color: #fff;
                position: absolute;
                bottom: .625rem;
                right: 1.25rem;
                font-size: .8125rem;
                background-color: #1989fa;
                border-radius: .25rem;
                padding: .375rem;
            }
        }

        // 评论列表
        .blogContent-comment-list {
            min-height: 3.75rem;
            padding: .625rem;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: .5rem;

            .noComment-box {
                font-size: .875rem;
                text-align: center;
                padding: 1.25rem 0;
                color: #444;
                font-weight: bold;

                .van-icon {
                    margin-right: .375rem;
                    vertical-align: bottom;
                }
            }

            .blogContent-comment-list-box {
                margin-bottom: 10px;

                // 评论用户信息
                .comment-list-box-usermasg {
                    display: flex;
                    align-items: center;

                    img {
                        width: 2.25rem;
                        height: 2.25rem;
                        border-radius: 50%;
                    }

                    >div {
                        margin-left: .625rem;

                        p {
                            margin: 4px 0;
                        }

                        p:nth-child(2) {
                            font-size: .8125rem;
                            color: #ccc;
                        }
                    }
                }

                // 评论信息
                .comment-list-box-word {
                    padding: .75rem .875rem .75rem 2.75rem;

                    p {
                        margin: 0;
                    }
                }

                // 回复
                .comment-list-box-reply {
                    border-top: 1px solid #eee;
                    text-align: right;
                    padding: .5rem;
                }

                .van-overlay {
                    background-color: rgb(0 0 0 / 7%);
                }

                // 回复弹出层
                .van-popup {

                    .comment-list-replylist {
                        width: 100%;
                        height: 65%;
                        // background-color: red;
                        padding: 1.875rem .875rem 0;
                        box-sizing: border-box;
                        position: absolute;
                        top: 0;
                        overflow-y: auto;
                    }

                    .comment-list-replybox {
                        width: 100%;
                        height: 35%;
                        position: absolute;
                        bottom: 0;
                    }
                }

            }
        }
    }


}
</style>